<template>
	<view>
		<uni-nav-bar left-icon="left" title="蒸煮"  :border="false" style="border-bottom: 1px solid #eee;font-weight: bold;" @clickLeft="back" />
		<view class="waterfall">
			<view
			  :id="`cont_${index + 1}`"
			  class="cont-box"
			  :style="{ width: widthCalc, 'margin-left': index === 0 ? 0 : marginCalc }"
			  v-for="(numVal, index) in flowData.column"
			  :key="numVal"
			>
				<view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
					<image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load @load="imgLoad(item)" @error="imgError(item)" />
					<view class="tit-tip multi-line-omit">{{ item.title }}</view>
					<view class="desc-tip multi-line-omit">{{ item.desc }}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 50px;text-align: center;margin-top: 40px;margin-bottom: 10px;">- 到底了 -</view>
	</view>
</template>

<script setup lang="ts">import { computed, getCurrentInstance, onMounted, reactive } from 'vue';

	
	
 
const _this = getCurrentInstance();
const flowData = reactive({
  list: [], // 数据值
  column: 2, // 瀑布列数
  columnSpace: 2 // 瀑布列宽间距
});
/* 数据赋值 */
flowData.list = [
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023011316736196297922801.jpg",
    title: "红烧鸡翅",
    desc: "老少皆宜"
  },
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023011316736202953769191.jpg",
    title: "清蒸鲳鱼",
    desc: "昌，美也，以味名"
  },
  {
    imgUrl: "https://i3.meishichina.com/attachment/recipe/2021/12/16/2021121616396423832251958079.jpg?x-oss-process=style/c320",
    title: "香蕉松饼",
    desc: "阳春白雪！"
  },
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023082716931444402131.jpg",
    title: "芦笋虾仁",
    desc: "蔬菜之王"
  },
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023011316736199373018391.jpg",
    title: "山药炖排骨",
    desc: "吮指之乐"
  },
  {
    imgUrl: "https://i3.meishichina.com/attachment/recipe/2024/12/15/2024121517342533381741.jpg?x-oss-process=style/c320",
    title: "煎蛋萝卜丝汤",
    desc: "老U爱小轩哥"
  },
  {
    imgUrl: "https://i3.meishichina.com/attachment/recipe/2024/12/15/2024121517342532199021.jpg?x-oss-process=style/c320",
    title: "红烧鸡腿",
    desc: "美味营养"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/04/25/20180425152463308665113.jpg?x-oss-process=style/c180",
    title: "香辣螃蟹",
    desc: "壳都嗦干净，真的太有味！"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/04/25/20180425152462830197313.jpg?x-oss-process=style/c180",
    title: "酸辣凤爪",
    desc: "酸爽开胃，爽脆Q弹超好吃~"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/07/01/20180701153042170188610169539.jpg?x-oss-process=style/c180",
    title: "剁椒巴沙鱼",
    desc: "无刺放心大口炫"
  },
  {
    imgUrl: "http://i80.meishichina.com/attachment/recipe/201005/201005191421565.jpg?x-oss-process=style/c180",
    title: "干煸鸡翅",
    desc: "皮脆肉嫩无腥味"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2017/10/13/20171013150787956071613.jpg?x-oss-process=style/c180",
    title: "水煮牛蛙",
    desc: "开胃解馋，多干两碗饭！"
  },
  {
    imgUrl: "http://i80.meishichina.com/attachment/recipe/2012/09/03/20120903191349544099136.jpg?x-oss-process=style/c180",
    title: "番茄蛋汤",
    desc: "酸甜可口，厨房小白也能做~"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/04/26/20180426152473843626510104208.jpg?x-oss-process=style/c180",
    title: "杂粮粥",
    desc: "养胃又养气，好喝还不胖~"
  }
];
/* 初始化每一列的数据 */
for (let i = 1; i <= flowData.column; i++) {
  flowData[`column_${i}`] = [];
}
/* 生命周期函数-实例被挂载后调用 */
onMounted(() => {
  initValue(0);
});
/* 计算列宽 */
const widthCalc = computed(() => {
  return `${100 / flowData.column - flowData.columnSpace}%`;
});
/* 计算 margin 外边距 */
const marginCalc = computed(() => {
  const columnWidth = 100 / flowData.column - flowData.columnSpace;
  return `${(100 - columnWidth.toFixed(5) * flowData.column) / (flowData.column - 1)}%`;
});

/* 获取最小值的对象 */
const getMinObj = (a, s) => {
  let m = a[0][s];
  let mo = a[0];
  for (let i = a.length - 1; i >= 0; i--) {
    if (a[i][s] < m) m = a[i][s];
  }
  mo = a.filter(i => i[s] === m);
  return mo[0];
};
/* 计算每列的高度 */
function getMinColumnHeight() {
  return new Promise(resolve => {
    const heightArr = [];
    for (let i = 1; i <= flowData.column; i++) {
      uni
        .createSelectorQuery()
        .in(_this)
        .select(`#cont_${i}`)
        .boundingClientRect(res => {
          heightArr.push({ column: i, height: res.height });
        })
        .exec(() => {
          if (flowData.column <= heightArr.length) {
            resolve(getMinObj(heightArr, "height"));
          }
        });
    }
  });
}
/* 初始化瀑布流数据 */
async function initValue(i) {
  if (i >= flowData.list.length) return false;
  const minHeightRes = await getMinColumnHeight();
  flowData[`column_${minHeightRes.column}`].push({
    ...flowData.list[i],
    index: i
  });
}
/* 图片加载完成 */
function imgLoad(item) {
  const i = item.index;
  initValue(i + 1); // 加载下一条数据
}
/* 图片加载失败 */
function imgError(item) {
  const i = item.index;
  initValue(i + 1); // 加载下一条数据
}

function back() {
	uni.navigateBack({
		delta: 1
	})
}

</script>

<style lang="scss">
	
		
.waterfall {
  background-color: #eaeaea;
  padding: 15px;
  .cont-box {
    $borderRadius: 12rpx;
    float: left;
    .item-box {
      width: 100%;
      padding-bottom: 20rpx;
      margin-bottom: 30rpx;
      border-radius: $borderRadius;
      box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.3);
      .img-tip {
        width: 100%;
        border-radius: $borderRadius $borderRadius 0 0;
      }
      .tit-tip {
        text-align: justify;
        font-size: 30rpx;
        padding: 10rpx 20rpx 0;
        font-weight: 900;
      }
      .desc-tip {
        text-align: justify;
        font-size: 26rpx;
        padding: 5rpx 20rpx 0;
        margin-top: 10rpx;
      }
    }
  }
}
/* 多行省略 */
.multi-line-omit {
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  text-overflow: ellipsis; // 溢出用省略号显示
  overflow: hidden; // 超出的文本隐藏
  display: -webkit-box; // 作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 2; // 显示的行
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}
/* 单行省略 */
.one-line-omit {
  width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
  white-space: nowrap; // 溢出不换行
  overflow: hidden; // 超出的文本隐藏
  text-overflow: ellipsis; // 溢出用省略号显示
}
.scroll-Y {
	height: 1200px;
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item {
	height: 100%;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}
.scroll-view-item_H {
	display: inline-block;
	width: 100%;
	height: 100%;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}	

</style>
